<template>
   <view class="tooltip" id="tooltip">
    <view class="content">
      <view class="title">
      </view>
      <view class="isLink">
        <up-icon :name="MapIcons.arrowright" size="25" color="#fff"></up-icon>
      </view>
    </view>
    <view>
      <view class="triangle-down"></view>
    </view>
   </view>
</template>

<script setup  lang="ts">
import { ref } from 'vue';
import { MapIcons } from '@/utils/base64-icons'
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'

// 创建响应式数据
const show = ref(false);

const emit = defineEmits<{
  (e: 'click', data: any): void
}>()

// 定义方法
function open() {
  show.value = true;
}

function close() {
  show.value = false;
}

function onClick(data: any) {
  emit('click', data)
}

onShow(() => {
})

defineExpose({
  open,
  close
});
</script>

<style scoped>
.tooltip {
  width: 75vw;
  position: fixed;
  color: white;
  border-radius: 4px;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  user-select: none;
  display: none;
  z-index: 10000;
}
.tooltip .content{
  background-color: rgb(112 153 180 / 89%);
  border-radius: 2px;
  padding: 1rem 0.6rem 1.4rem 0.6rem;
  display: flex;
  align-items:center;
}
.tooltip .content .title{
  flex:1;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.tooltip .content .isLink{
  display: none;
}


.tooltip .triangle-down {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid rgb(112 153 180 / 89%);
  margin: 0 auto;
}

</style>

